:root {
  --el-color-primary: #4CBC9A;
  --el-color-primary-light-3: #51a188;
  --el-color-primary-light-5: #4b806f;
  --el-color-primary-light-7: #2c4d43;
  --el-color-primary-light-8: #4CBC9A;
  --el-color-primary-light-9: #fff;
  --el-color-primary-dark-2: #50deb1;

  --el-color-success: #4CBC9A;
  --el-color-success-light-3: #24640c;
  --el-color-success-light-5: #1c4b0a;
  --el-color-success-light-7: #1b460a;
  --el-color-success-light-8: #4CBC9A;
  --el-color-success-light-9: #fff;
  --el-color-success-dark-2: #4cbb15;

  --el-color-warning: #FEC64F;
  --el-color-warning-light-3: #e8bc5e;
  --el-color-warning-light-5: #bd9e5d;
  --el-color-warning-light-7: #a48748;
  --el-color-warning-light-8: #FEC64F;
  --el-color-warning-light-9: #fff;
  --el-color-warning-dark-2: #fdc03d;

  --el-color-danger: #FC6B57;
  --el-color-danger-light-3: #e72828;
  --el-color-danger-light-5: #c22525;
  --el-color-danger-light-7: #8f2020;
  --el-color-danger-light-8: #FC6B57;
  --el-color-danger-light-9: #fff;
  --el-color-danger-dark-2: #f78989;

  --el-color-error: #f56c6c;
  --el-color-error-light-3: #b25252;
  --el-color-error-light-5: #854040;
  --el-color-error-light-7: #582e2e;
  --el-color-error-light-8: #412626;
  --el-color-error-light-9: #2b1d1d;
  --el-color-error-dark-2: #f78989;

  --el-color-info: #0C809A;
  --el-color-info-light-3: #6b6d71;
  --el-color-info-light-5: #525457;
  --el-color-info-light-7: #393a3c;
  --el-color-info-light-8: #0C809A;
  --el-color-info-light-9: #fff;
  --el-color-info-dark-2: #a6a9ad;

  --el-background-primary: #141414;
  --custom-color: #333333;
  --custom-color-active: rgba(0, 0, 0, 0.27);
  --custom-color-hover: #FFFFFF;
  --el-button-hover-text-color: #2E2E2E;
  --custom-background-sidebar: #FFFFFF;
  --custom-background-sidebar-active: #4CBC9A;
  --custom-background-sidebar-hover: #4CBC9A;
  --custom-color-sidebar: #A098AE;
  --custom-color-sidebar-active: #ffffff;
  --custom-color-sidebar-hover: #fff;
  --custom-background-sub: #fff;
  --custom-sub-hover: transparent;

  --custom-navbar-background: #fff;
  --custom-navbar-background-hover: #3645f11f;
  --custom-navbar-color: #000;
  --custom-section-background: #FAFAFA;

  --custom-boder: white;
  //--custom-fill-color-blank: white;

  --custom-form-label-bold: 100;

  --custom-tabs-bg: #e2e2e2;
  --el-transition-duration: 0.1s;

  --el-scrollbar-bg-color: --custom-background-sidebar;
  --el-scrollbar-hover-bg-color: --custom-background-sidebar-hover;

  --el-text-color-regular: #374557;
  --el-input-text-color: #374557;

  --el-bg-color: #fff;
  --el-bg-color-overlay: #fff;

  --el-table-row-hover-bg-color: #262727;
  --el-table-bg-color: #fff;
  --el-table-text-color: #374557;
  --el-card-header-bg-color: #fff;
  --el-card-header-text-color: #374557;
  --el-table-tr-bg-color: #374557;

  --el-link-hover-text-color: #8b937359;

  -el-dropdown-hover-fill: #4CBC9A;
  //--el-dropdown-hover-color: #fff;
}

html.customTheme {
  --el-color-primary: #4CBC9A;
  --el-color-primary-light-3: #51a188;
  --el-color-primary-light-5: #4CBC9A;
  --el-color-primary-light-7: #2c4d43;
  --el-color-primary-light-8: #4CBC9A;
  --el-color-primary-light-9: #fff;
  --el-color-primary-dark-2: #50deb1;

  --el-color-success: #4CBC9A;
  --el-color-success-light-3: #24640c;
  --el-color-success-light-5: #1c4b0a;
  --el-color-success-light-7: #1b460a;
  --el-color-success-light-8: #4CBC9A;
  --el-color-success-light-9: #fff;
  --el-color-success-dark-2: #4cbb15;

  --el-color-warning: #FEC64F;
  --el-color-warning-light-3: #e8bc5e;
  --el-color-warning-light-5: #bd9e5d;
  --el-color-warning-light-7: #a48748;
  --el-color-warning-light-8: #FEC64F;
  --el-color-warning-light-9: #fff;
  --el-color-warning-dark-2: #fdc03d;

  --el-color-danger: #FC6B57;
  --el-color-danger-light-3: #e72828;
  --el-color-danger-light-5: #c22525;
  --el-color-danger-light-7: #8f2020;
  --el-color-danger-light-8: #FC6B57;
  --el-color-danger-light-9: #fff;
  --el-color-danger-dark-2: #f78989;

  --el-color-error: #f56c6c;
  --el-color-error-light-3: #b25252;
  --el-color-error-light-5: #854040;
  --el-color-error-light-7: #582e2e;
  --el-color-error-light-8: #412626;
  --el-color-error-light-9: #2b1d1d;
  --el-color-error-dark-2: #f78989;

  --el-color-info: #0C809A;
  --el-color-info-light-3: #6b6d71;
  --el-color-info-light-5: #525457;
  --el-color-info-light-7: #393a3c;
  --el-color-info-light-8: #0C809A;
  --el-color-info-light-9: #fff;
  --el-color-info-dark-2: #a6a9ad;

  --el-background-primary: #141414;
  --custom-color: #333333;
  --custom-color-active: rgba(0, 0, 0, 0.27);
  --custom-color-hover: #FFFFFF;
  --el-button-hover-text-color: #2E2E2E;
  --custom-sidebar-bg: #FFFFFF;
  --custom-sidebar-bg-active: #4CBC9A;
  --custom-sidebar-bg-hover: #4cbc9a96;
  --custom-sidebar-color: #727272;
  --custom-sidebar-active-color: #fff;
  --custom-sidebar-hover-color: #fff;

  --custom-navbar-background: #fff;
  --custom-navbar-background-hover: #3645f11f;
  --custom-navbar-color: #000;
  --custom-section-background: #FAFAFA;

  --custom-boder: white;
  //--custom-fill-color-blank: white;

  --custom-form-label-bold: 100;

  --custom-tabs-bg: #e2e2e2;
  --el-transition-duration: 0.1s;

  --el-scrollbar-bg-color: --custom-background-sidebar;
  --el-scrollbar-hover-bg-color: --custom-background-sidebar-hover;

  --el-text-color-regular: #374557;
  --el-input-text-color: #374557;

  --el-bg-color: #fff;
  --el-bg-color-overlay: #fff;

  --el-table-row-hover-bg-color: #262727;
  --el-table-bg-color: #fff;
  --el-table-text-color: #374557;
  --el-card-header-bg-color: #fff;
  --el-card-header-text-color: #374557;
  --el-table-tr-bg-color: #374557;

  --el-link-hover-text-color: #8b937359;

  -el-dropdown-hover-fill: #4CBC9A;
  //--el-dropdown-hover-color: #fff;
}

html.dark {
  --el-color-primary: #F4A754;
  --el-color-primary-light-3: #798066;
  --el-color-primary-light-5: #5f6453;
  --el-color-primary-light-7: #4c4f44;
  --el-color-primary-light-8: #45483c;
  --el-color-primary-light-9: #34362d;
  --el-color-primary-dark-2: #2c2d27;

  --el-color-success: #267309;
  --el-color-success-light-3: #24640c;
  --el-color-success-light-5: #1c4b0a;
  --el-color-success-light-7: #1b460a;
  --el-color-success-light-8: #132f08;
  --el-color-success-light-9: #E7F7E1;
  --el-color-success-dark-2: #4cbb15;

  --el-color-warning: #2B1CD4;
  --el-color-warning-light-3: #2e1fd7;
  --el-color-warning-light-5: #2c20af;
  --el-color-warning-light-7: #2a1ead;
  --el-color-warning-light-8: #211985;
  --el-color-warning-light-9: #E9EBFB;
  --el-color-warning-dark-2: #2c2862;

  --el-color-danger: #FA2929;
  --el-color-danger-light-3: #e72828;
  --el-color-danger-light-5: #c22525;
  --el-color-danger-light-7: #8f2020;
  --el-color-danger-light-8: #621d1d;
  --el-color-danger-light-9: #FCD7D0;
  --el-color-danger-dark-2: #f78989;

  --el-color-error: #f56c6c;
  --el-color-error-light-3: #b25252;
  --el-color-error-light-5: #854040;
  --el-color-error-light-7: #582e2e;
  --el-color-error-light-8: #412626;
  --el-color-error-light-9: #2b1d1d;
  --el-color-error-dark-2: #f78989;

  --el-color-info: #0C809A;
  --el-color-info-light-3: #6b6d71;
  --el-color-info-light-5: #525457;
  --el-color-info-light-7: #393a3c;
  --el-color-info-light-8: #2d2d2f;
  --el-color-info-light-9: #E5E7E5;
  --el-color-info-dark-2: #a6a9ad;

  --el-bg-color: #2E2E2E;

  --el-background-primary: #141414;
  --custom-color: #333333;
  --custom-color-active: rgba(0, 0, 0, 0.27);
  --custom-color-hover: #FFFFFF;
  --el-button-hover-text-color: #2E2E2E;
  --custom-background-sidebar: #2E2E2E;
  --custom-background-sidebar-active: #8B9373;
  --custom-background-sidebar-hover: #8B9373;
  --custom-color-sidebar: #ffffff;
  --custom-color-sidebar-active: #ffffff;
  --custom-color-sidebar-hover: #ffffff;
  --custom-background-sub: #ffffff;
  --custom-sub-hover: transparent;

  --custom-navbar-background: #2E2E2E;
  --custom-navbar-background-hover: #3645f11f;
  --custom-navbar-color: #000;
  --custom-section-background: #131317;

  --custom-boder: white;
  //--custom-fill-color-blank: white;

  --custom-form-label-bold: 100;

  --custom-tabs-bg: #e2e2e2;
  --el-transition-duration: 0.1s;

  --el-scrollbar-bg-color: --custom-background-sidebar;
  --el-scrollbar-hover-bg-color: --custom-background-sidebar-hover;

  --el-text-color-regular: #fff;
  --el-input-text-color: #fff;

  --el-bg-color-overlay: #2E2E2E;

  --el-card-header-bg-color: #4C4C4C;
  --el-table-row-hover-bg-color: #262727;
  --el-table-bg-color: #2E2E2E;
  --el-table-tr-bg-color: #2E2E2E;

  --el-link-hover-text-color: #8b937359;
}

$base-font-bold: bold;

$base-input-width: 200px;
$base-select-width: 200px;
$base-time-width: 240px;
$base-button-width: 56px;
$base-primary-height: 35px;
$base-primary-area-height: 52px;

$base-font-size: 14px;
$large-font-size: 16px;

$base-sidebar-width: 210px;
$base-navbar-height: 60px;